<script lang="ts" setup>
import {onMounted,ref,reactive} from "vue";
import {getSyslist} from '@/axios/user'
import {useRouter} from 'vue-router'
let router=useRouter();
//跳转到报表页
let jumpSocialList=()=>{
    router.push('/SocialList')
}
//跳转到社保历史归档
let jumpLocalList=()=>{
  router.push('/localSocialList')
}

//表格数据
const tableData = ref([])
const background = ref(false)

//多选框  获取全部部门信息
let checkList = ref(<any>[])
let checkList1 = ref(<any>[])
let checkList2 = ref(<any>[])
let checkboxForm = ref(<any>[])
let checkboxForm1 = ref(<any>[])
let checkboxForm2 = ref(<any>[])

let page=ref<any>(1);
let size=ref<any>(10);
let total=ref(0)
//分页
const handleSizeChange = (val: number) => {
  size.value=val
  getdata()
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  page.value=val
  getdata()
  console.log(`${page.value}: ${val}`)
}

//获取表格数据
let getdata=async(a='',b='',c='')=>{
  console.log(a,b,c)
  let res=await getSyslist(page.value,size.value,a,b,c)
  console.log(res.data.data.rows)
  if(res.status==200){
    total.value=res.data.data.total
      const sysres=res.data.data.rows;
      syslist(sysres)//根据复选框渲染数据
     
      tableData.value=res.data.data.rows
  }
}

//复选框的数据
let syslist=(res:any)=>{
  let adds=<any>[]
    let newadds=<any>[]
    res.map((item,index)=>{
      checkboxForm.value[index]={name:item.departmentName,id:item.id}
    })
    res.map((item,index)=>{
      checkboxForm1.value[index]={name:item.participatingInTheCity,id:item.id}
    })
    res.map((item,index)=>{
      checkboxForm2.value[index]={name:item.providentFundCity,id:item.id}
    })
    
    console.log(checkboxForm.value,checkboxForm1.value,checkboxForm2.value)
}


//根据部门id查询数据
let checkoutbox=(id)=>{
  getdata(checkList.value.join(','),checkList1.value.join(','),checkList2.value.join(','))
}

onMounted(()=>{

  getdata()//获取社保列表数据

})


</script>

<template>
    <el-card style="min-width:70%">
        <div class="top">
            <div class="devchild">
                <button class="range" @click="jumpLocalList">历史归档</button>
                <button class="setters" @click="jumpSocialList">202301报表</button>
            </div>
        </div>
    </el-card>
    <el-card style="min-width:70%">
      <el-form label-width="auto" style="max-width: 600px;">
          <el-form-item label="部门">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="(item,index) in checkboxForm"
              :key="item.id"
              :value="item.id"
              @change="checkoutbox(item.id)"
              >
              {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="社保城市:">
            <el-checkbox-group v-model="checkList1">
              <el-checkbox v-for="(item,index) in checkboxForm1"
              :key="item.id"
              :value="item.id"
              @change="checkoutbox(item.id)"
              >
              {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="公积金城市:">
            <el-checkbox-group v-model="checkList2">
              <el-checkbox v-for="(item,index) in checkboxForm2"
              :key="item.id"
              :value="item.id"
              @change="checkoutbox(item.id)"
              >
              {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
    </el-card> 
    <el-card style="min-width:70%">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="150" />
            <el-table-column prop="username" label="姓名" width="150" sortable/>
            <el-table-column prop="mobile" label="手机" width="150" sortable/>
            <el-table-column prop="workNumber" label="工号" width="150" sortable/>
            <el-table-column prop="departmentName" label="部门" width="150" sortable/>
            <el-table-column prop="timeOfEntry" label="入职时间" width="150" sortable/>
            <el-table-column prop="leaveTime" label="离职时间" width="150" sortable>
                <template #default="scope">
                    {{ scope.row.leaveTime==''?scope.row.leaveTime:'--'}}
                </template>
            </el-table-column>
            <el-table-column prop="participatingInTheCity" label="社保城市" width="120"/>
            <el-table-column prop="providentFundCity" label="公积金城市" width="120"/>
            <el-table-column prop="socialSecurityBase" label="社保基数" width="120"/>
            <el-table-column prop="providentFundBase" label="公积金基数" width="120"/>
  </el-table>
  <el-row :gutter="800">
    <el-col :span="12" :offset="6">
        <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[2,4,6,8]"
      :background="background"
      layout="prev,pager,next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-col>
  </el-row>
  
    </el-card>
</template>

<style lang="less" scoped>
.el-alert {
  margin: 20px;
}
.el-alert:first-child {
  margin:10;
}
.el-card{
    margin:10px 0px;
}
.top{
    width:90%;
    height:60px;
    display:flex;
    align-items: center;
    .devchild{
        width:240px;
        height:60px;
        display:flex;
        justify-content:space-around;
        align-items: center;
        button{
            width:100px;
            height:30px;
            display:flex;
            justify-content: center;
            align-items:center;
            color:white;
            border: none;
        }
        .range{
            background-color:#ef6d6e;
        }
        .setters{
            background-color:#3e4bfa;
        }
    }

}

.el-checkbox-group{
    width:200px;
    height:100px;
    display: flex;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
// 滑块
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 60%;
  margin-right:180px;
}

// tab切换
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>

